<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Forms</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/jqueryUI/smoothness/jquery-ui-1.8.15.custom.css" rel="stylesheet" type="text/css" media="screen" />

    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.validate.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/additional-methods.js"></script>
    <script type="text/javascript" src="includes/javascript/template/custom-validation-methods.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.maskedinput-1.3.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.timeentry.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/jquery.keyfilter-1.7.min.js"></script> <!-- Not being used -->
    <script type="text/javascript" src="includes/javascript/template/jquery-ui-1.8.15.custom.min.js"></script>

    <style type="text/css">
      #inlineFormErrors {display:none;}
      label.error {float :none;}
   </style>

    <script type="text/javascript">
      $(function(){
        function stripHtmlTags(stringIn) {
          var retVal = "";
          if(stringIn) {
            retVal = stringIn.replace(/<\/?[^>]+>/gi, '');
          }
          return retVal;
        }

      //Field Masking
      $("[rel=time]").timeEntry({ampmPrefix: ' ', spinnerImage : false});
      $("[type=tel]").mask("(999) 999-9999", {completed : function(){}}); //$("[type=tel]").mask("(999) 999-9999? x99999");
      //$("[rel=zip]").mask("99999-9999"); -- have to get unmasked value -- introduces too much complexity
      $("[type=date], [rel=date]").mask("99/99/9999");
      //$("[type=url]").keyfilter(/^.$/); -- not working correctly
      

      var form_ = "#inlineForm";
      var formErrors_= "#inlineFormErrors";
      $(form_).validate({
        errorLabelContainer : "#inlineFormErrors ul" ,
        wrapper : "li",
        onfocusout : false,
        onkeyup : false,
        onclick : false,
        showErrors: function(errorMap, errorList) {
          //cleanup
          $(".errorIcon", form_).remove();
          $("div.fieldErrors", form_).empty();
          if(!$.isEmptyObject(errorMap)){
            $("#inlineFormErrors").show();
            $.each(errorMap, function(index, value){
              var errorIcon = '<span class="errorIcon"></span>';
              var $errorElement = $(value);
              if ($errorElement.attr("rel")==="group") {
                $("#" + index).find("legend").append(errorIcon);
              } else { $("#" + index).before(errorIcon); }
            });
            //Add row errors
            $.each(errorList, function(ind, val){
              var test = $(val.message).text();
              $(val.element).parents("div.row").find("div.fieldErrors").append("<span>" + stripHtmlTags(val.message) + "</span>");
            });
          } else {$("#inlineFormErrors").hide();}
          this.defaultShowErrors();
        },
          rules : {
            firstName : {required : true, minlength : 2, maxlength : 10},
            lastName : {required : true},
            alias : {lettersonly: true},
            dob: {required : true, date:true},
            email : {required : true, email : true},
            message : {required : true},
            state : {required: true},
            zip : {zip : true},
            color : {requiredGroup : true},
            phone : {phoneUS : true},
            url : {url : true},
            city : {alphanumeric : true},
            age : {digits : true, min : 1, max : 100},
            weight : {number : true},
            creditCard : {creditcard : true},
            salary : {money : true},
            contactTime : {timestamp : true}
          },
          messages : {
            firstName : {
              required : '<a href="#firstName" class="errorLink" >First name</a> is required.',
              minlength : '<a href="#firstName" class="errorLink" >First name</a> is invalid. It requires at least {0} characters.',
              maxlength : '<a href="#firstName" class="errorLink" >First name</a> is invalid. Maximum of {0} characters allowed.'
            },
            lastName : {
              required : '<a href="#lastName" class="errorLink">Last name</a> is required.'
            },
            alias : {
              lettersonly : '<a href="#alias" class="errorLink" >Alias</a> is invalid. It must contain letters only.'
            },
            dob : {
              required : '<a href="#dob" class="errorLink" >Date of birth</a> is required.',
              date : '<a href="#dob" class="errorLink" >Date of birth</a> is invalid. Valid date format is \'mm/dd/yyyy\'.'
            },
            email : {
              required : '<a href="#email" class="errorLink" >Email address</a> is required.',
              email : '<a href="#email" class="errorLink" >Email address</a> is invalid. Please enter a valid email address.'
            },
            message : {
              required : '<a href="#message" class="errorLink" >Message</a> is required.'
            },
            state : {
              required : '<a href="#state" class="errorLink">State</a> is required.'
            },
            zip : {
              zip : '<a href="#zip" class="errorLink">Zip code</a> is invalid. Valid zip format is xxxxx or xxxxx-xxxx.'
            },
            color : {
              requiredGroup : '<a href="#color" class="errorLink" rel="group">Color</a> is required.'
            },
            phone : {
              phoneUS : '<a href="#phone" class="errorLink" >Phone number</a> is invalid. Valid phone format is \'(123) 456-7890\'.'
            },
            url : {
              url : '<a href="#url" class="errorLink" >Url</a> is invalid. Please enter a valid url (web address).'
            },
            city : {
              alphanumeric : '<a href="#city" class="errorLink" >City</a> is invalid. Please enter alphanumeric characters.'
            },
            age : {
              digits : '<a href="#age" class="errorLink" >Age</a> is invalid. Please enter a valid number.',
              min : '<a href="#age" class="errorLink" >Age</a> is invalid. Minimum value is {0}.',
              max : '<a href="#age" class="errorLink" >Age</a> is invalid. Maximum value is {0}.'
            },
            weight : {
              number : '<a href="#weight" class="errorLink" >Weight</a> is invalid. Please enter a valid decimal number.'
            },
            creditCard : {
              creditcard : '<a href="#creditCard" class="errorLink" >Credit Card Number</a> is invalid. Please enter a valid credit card number.'
            },
            salary : {
              money : '<a href="#salary" class="errorLink" >Salary</a> is invalid. Please enter a valid amount.'
            },
            contactTime: {
              timestamp : '<a href="#contactTime" class="errorLink" >Best time to call</a> is invalid. Valid time format is \'12:59 AM\' or \'12:59 PM\'.'
            }
          },
          debug : true
        });

        $(".errorLink").live("click", function() {
          var field = $(this).attr("href");
          $(field).focus();
          return false;
        });

        /* For urls - put http:// when focusing on fields */
        
        $("[type=url]", form_).focus(function(){
          var $elem = $(this);
          if(!$elem.val()){
            $elem.val("http://");
          }
        }).blur(function(){
          var $elem = $(this);
          if($elem.val()==="http://"){
            $elem.val("");
          }
        });

        //date picker
        $("[rel=date], type[date]").datepicker({showButtonPanel: true, changeMonth : true, changeYear : true, yearRange: '1900:c+10'});

        /**
         *
          Scenarios to be validated

          required
          requiredGroup
          phone
          email
          url
          alphanumeric
          date -- not working on chrome 23 or a simple nubmer validates. Should be taken of with datepicker
          digits
          minlength
          maxlength
          min
          max
          float [number]
          credit card
          money
          zip
          lettersonly
          time          

         *
         */

      });
    </script>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "formsWithValidation";
  ?>

  <body>

    <!-- Container -->
    <div id="container">
      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>
      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Forms</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content" >

          <div class="sectionLeft">

            <h1>Forms</h1>

            <div id="forms" >

              <h2>Inline Form</h2>

              <form id="inlineForm" action="" method="post" class="inlineForm">
                <div class="formErrors" id="inlineFormErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul></ul>
                </div>

                <div class="row">
                  <label for="firstName"><span class="helpIcon"></span><span class="requiredLabel">*</span>First name
                    
                    <input type="text" id="firstName" name="firstName" value=""/>                    
                  </label>
                  <label for="lastName"><span class="requiredLabel">*</span>Last name
                    <input type="text" id="lastName" name="lastName" value=""/>
                  </label>

                  <label for="alias">Alias
                    <input type="text" id="alias" name="alias" value=""/>
                  </label>

                  <label for="gender_male" class="inline">
                    <input type="radio" id="gender_male" name="gender" value="male"/>Male
                  </label>

                  <label for="gender_female" class="inline">
                    <input type="radio" id="gender_female" name="gender" value="female"/>Female
                  </label>

                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="dob"><span class="requiredLabel">*</span>Date of birth
                    <input type="text" id="dob" name="dob" rel="date" />
                  </label>

                  <label for="age">Age
                    <input type="number" id="age" name="age"/>
                  </label>

                  <label for="ageRange"><span class="helpIcon"></span> Age range
                    
                    <select id="ageRange" name="ageRange">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>

                  <div class="fieldErrors"></div>

                </div>
                <div class="row">
                  <!--Address-->
                  <label for="street">Street
                    <input type="text" id="street" name="street"/>
                  </label>

                  <label for="city">City
                    <input type="text" id="city" name="city"/>
                  </label>

                  <label for="state"><span class="helpIcon"></span><span class="requiredLabel">*</span>State
                    
                    <select id="state" name="state">
                      <option value=""></option>
                      <option value="IL">IL</option>
                    </select>
                  </label>

                  <label for="zip">Zip code
                    <input type="text" id="zip" name="zip" rel="zip"/>
                  </label>

                  <div class="fieldErrors"></div>

                </div>

                <div class="row">
                  <label for="email"><span class="requiredLabel">*</span>Email address
                    <input type="email" id="email" name="email"/>
                  </label>

                  <label for="phone">Phone number
                    <input type="tel" id="phone" name="phone"/>
                  </label>

                  <label for="url">Url
                    <input type="url" id="url" name="url"/>
                  </label>

                  <div class="fieldErrors"></div>

                </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset>
                    <legend>Favorite foods</legend>
                    <label for="food1" class="stacked">
                      <input type="checkbox" id="food1" name="food1" value="Chinese"/>Chinese
                    </label>
                    <label for="food2" class="stacked">
                      <input type="checkbox" id="food2" name="food2" value="Italian"/>Italian
                    </label>
                    <label for="food3" class="stacked">
                      <input type="checkbox" id="food3" name="food3" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food4" class="stacked">
                      <input type="checkbox" id="food4" name="food4" value="Mexican"/>Mexican
                    </label>
                  </fieldset>

                  <!--Favorite Color--->
                  <fieldset id="color">
                    <legend><span class="helpIcon"></span><span class="requiredLabel">*</span>Favorite color</legend>
                    <label for="color1" class="inline">
                      <input type="radio" id="color1" name="color" value="red"/>Red
                    </label>
                    <label for="color2" class="inline">
                      <input type="radio" id="color2" name="color" value="green"/>Green
                    </label>
                    <label for="color3" class="inline">
                      <input type="radio" id="color3" name="color" value="blue"/>Blue
                    </label>
                  </fieldset>

                  <div class="fieldErrors"></div>

                </div>


                <div class="row">
                  <label for="weight">Weight (lbs)
                    <input type="text" id="weight" name="weight" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="creditCard">Credit Card Number
                    <input type="text" id="creditCard" name="creditCard" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="salary">Salary
                    <input type="text" id="salary" name="salary" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">
                  <label for="contactTime">Best time to call
                    <input type="text" id="contactTime" name="contactTime" rel="time" />
                  </label>
                  <div class="fieldErrors"></div>
                </div>

                <div class="row">

                  <label for="message"><span class="requiredLabel">*</span>Message
                    <textarea cols="20" rows="5" id="message" name="message"></textarea>
                  </label>

                  <div class="fieldErrors">
<!--                    <span>Message is required</span>-->
                  </div>

                </div>

                <div class="row">
                  <input type="submit" id="submitInlineForm" name="submitInlineForm" value="Submit"/>
                </div>

              </form>

<?php /*
              <h2>Block form</h2>

              <form action="" method="post" class="blockForm">
                <div class="formErrors">
                  <div class="formErrorsHeader">Please correct these errors:</div>
                  <ul>
                    <li><a href="#">First name</a> is required</li>
                    <li><a href="#">Last name</a> is required</li>
                    <li><a href="#">Date of birth</a> is required</li>
                    <li><a href="#">Favorite color</a> is required</li>
                    <li><a href="#">Message</a> is required</li>
                  </ul>
                </div>

                <div class="row">
                  <label for="firstName2"><span class="helpIcon"></span><span class="requiredLabel">*</span>First name. This is a very log label. It will wrap to another line.<span class="errorIcon"></span>
                    
                    <input type="text" id="firstName2" value=""/>
                  </label>
                  <div class="fieldErrors">
                    <span>First name is required</span>
                  </div>
                </div>
                <div class="row">
                  <label for="lastName2"><span class="requiredLabel">*</span>Last name<span class="errorIcon"></span>
                    <input type="text" id="lastName2" value=""/>
                  </label>
                  <div class="fieldErrors">
                    <span>Last name is required</span>
                  </div>
                </div>
                <div class="row">
                  <label for="gender_male2" class="inline">
                    <input type="radio" id="gender_male2" name="gender2" value="male"/>Male
                  </label>

                  <label for="gender_female2" class="inline">
                    <input type="radio" id="gender_female2" name="gender2" value="female"/>Female
                  </label>

                </div>

                <div class="row">
                  <label for="dob2"><span class="requiredLabel">*</span>Date of birth<span class="errorIcon"></span>
                    <input type="text" id="dob2" name="dob2"/>
                  </label>

                  <div class="fieldErrors">
                    <span>Date of birth is required</span>
                  </div>

                </div>
                <div class="row">
                  <label for="age2">Age
                    <input type="text" id="age2" name="age2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="ageRange2"><span class="helpIcon"></span> Age range                   
                    <select id="ageRange2" name="ageRange2">
                      <option value="10">0-10 yrs</option>
                      <option value="20">10-20 yrs</option>
                      <option value="30">20-30 yrs</option>
                      <option value="40">30-40 yrs</option>
                      <option value="50">&gt;50 yrs</option>
                    </select>
                  </label>

                </div>

                <div class="row">
                  <!--Address-->
                  <label for="street2">Street
                    <input type="text" id="street2" name="street2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="city2">City
                    <input type="text" id="city2" name="city2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="state2"><span class="helpIcon"></span>State
                    
                    <select id="state2" name="state2">
                      <option value="IL">IL</option>
                    </select>
                  </label>
                </div>
                <div class="row">
                  <label for="zip2">Zip code
                    <input type="text" id="zip2" name="zip2"/>
                  </label>
                </div>

                <div class="row">
                  <label for="email2"><span class="requiredLabel">*</span>Email address
                    <input type="text" id="email2" name="email2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="phone2">Phone number
                    <input type="text" id="phone2" name="phone2"/>
                  </label>
                </div>
                <div class="row">
                  <label for="url2">Url
                    <input type="text" id="url2" name="url2"/>
                  </label>

                </div>

                <div class="row">
                  <!--Favorite Foods-->
                  <fieldset>
                    <legend>Favorite foods</legend>
                    <label for="food21" class="stacked">
                      <input type="checkbox" id="food21" name="food21" value="Chinese"/>Chinese
                    </label>
                    <label for="food22" class="stacked">
                      <input type="checkbox" id="food22" name="food22" value="Italian"/>Italian
                    </label>
                    <label for="food23" class="stacked">
                      <input type="checkbox" id="food23" name="food23" value="Mediterranean"/>Mediterranean
                    </label>
                    <label for="food24" class="stacked">
                      <input type="checkbox" id="food24" name="food24" value="Mexican"/>Mexican
                    </label>
                  </fieldset>
                </div>

                <div class="row">
                  <!--Favorite Color--->
                  <fieldset>
                    <legend><span class="helpIcon"></span><span class="requiredLabel">*</span>Favorite color. This is a very long label. It will wrap. <span class="errorIcon"></span></legend>
                    <label for="color21" class="inline">
                      <input type="radio" id="color21" name="color2" value="red"/>Red
                    </label>
                    <label for="color22"  class="inline">
                      <input type="radio" id="color22" name="color2" value="green"/>Green
                    </label>
                    <label for="color23"  class="inline">
                      <input type="radio" id="color23" name="color2" value="blue"/>Blue
                    </label>
                  </fieldset>

                  <div class="fieldErrors">
                    <span>Favorite color is required</span>
                  </div>

                </div>

                <div class="row">

                  <label for="message2"><span class="requiredLabel">*</span>Message<span class="errorIcon"></span>
                    <textarea cols="20" rows="5" id="message2" name="message2"></textarea>
                  </label>

                  <div class="fieldErrors">
                    <span>Message is required</span>
                  </div>

                </div>

                <div class="row">
                  <label for="children">No. children you have
                    <input type="text" id="children" name="children"/>
                  </label>
                </div>

              </form> <!-- End blockForm -->
*/ ?>

            </div>


            <!--   end #section-->
          </div>

          <!-- Right Navigation -->
          <div id="sidebar">
            <?php include('includes/rightNavSamples.php') ?>
          </div>
          <!-- end Right Navigation -->


          <!-- end #content -->
        </div>

      </div>
      <!-- end #bodyContent -->
      <!-- End Body -->

      <!-- Footer -->
      <div id="footer">
        <?php include('includes/footer.php') ?>
      </div>
      <!-- End Footer -->
    </div>
    <!-- End Container -->
  </body>
</html>

